import React, { Component } from 'react'
import { Select } from 'antd'
import { getChannelsList } from '../../api/channels'

const { Option } = Select

export default class ArticleChannels extends Component {
  constructor(props) {
    super(props)
    this.state = {
      channels: []
    }
  }

  componentDidMount() {
    this.getChannels()
  }

  async getChannels() {
    const {
      data: { channels }
    } = await getChannelsList()
    this.setState({
      channels
    })
  }

  render() {
    return (
      <Select
        value={this.props.value}
        style={{ width: this.props.width }}
        placeholder={'请选择频道列表'}
        onChange={(e) => {
          this.props.onChange(e)
        }}
        allowClear>
        {this.state.channels.map((item) => (
          <Option value={item.id} key={item.id}>
            {item.name}
          </Option>
        ))}
      </Select>
    )
  }
}
